<template>
  <div>
    <div class="top">
      <i
        class="el-icon-s-order"
        style="color: rgb(255, 103, 0); font-size: 30px; font-weight: bolder"
      ></i>
      <span style="font-size: 30px; font-weight: normal">确认订单</span>
    </div>
    <div class="w">
      <div class="content">
        <p class="title">收货地址</p>
        <ul class="ul">
          <li class="li">
            <div class="p">
              <h2>陈同学</h2>
              <p>13580018623</p>
              <p>广东 广州市 白云区 江高镇</p>
              <p>广东白云学院</p>
            </div>
          </li>
          <li class="lli">
            <div class="box">
              <h2>陈同学</h2>
              <p>13580018623</p>
              <p>广东 茂名市 化州市 杨梅镇</p>
              <p>***</p>
            </div>
          </li>
          <li class="lli">
            <div class="ic">
              <i class="el-icon-circle-plus-outline icon"></i>
              <p>新加新地址</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="center">
        <p>商品及优惠卷</p>
        <div class="good_list">
          <ul class="uul">
            <li v-for="(item, index) in $store.state.cart" :key="index">
              <span class="kuan">
                <img
                  class="yanse"
                  :src="`http://101.132.181.9/api/${item.productImg}`"
                  alt=""
                />
                <span>{{ item.productName }}</span>
              </span>
              <span>
                <span>{{ item.price }}元</span>x{{ item.num }}
              </span>
              <span style="color: red">{{ item.price * item.num }}元</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="section-shipment">
        <p class="tit">配送方式</p>
        <p class="ship">包邮</p>
      </div>
      <div class="section-invoice">
        <p class="tit">发票</p>
        <p class="invoice">电子发票</p>
        <p class="invoice">个人</p>
        <p class="invoice">商品明细</p>
      </div>
      <div class="count">
        <div class="box-money">
          <ul>
            <li>
              商品件数:<font color="red">{{ count }}件</font>
            </li>
            <li>
              商品总价:<font color="red">{{ sum }}元</font>
            </li>
            <li>活动优惠:<font color="red">-0元</font></li>
            <li>优惠券抵扣:<font color="red">-0元</font></li>
            <li>运费:<font color="red">0元</font></li>
            <li>
              应付金额:<font color="red" size="16px">{{ sum }}</font
              ><font color="red">元</font>
            </li>
          </ul>
        </div>
      </div>
      <div class="bar">
        <div class="btn">
          <el-button>取消</el-button>
          <el-button @click="gojiesuan">去结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addOrder } from "@/api/user";
export default {
  computed: {
    //件数
    count() {
      var sun = 0;
      this.$store.state.cart.forEach((item) => {
        sun += item.num;
      });
      return sun;
    },
    //money
    sum() {
      var sun = 0;
      this.$store.state.cart.forEach((item) => {
        sun += item.price * item.num;
      });
      return sun;
    },
  },
  mounted() {},
  methods: {
    async gojiesuan() {
      const res = await addOrder({
        user_id: this.$store.getters.userID,
        products: this.$store.state.cart,
      });
      this.$router.push("/order");
      console.log(res.data);
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  height: 70px;
  width: 100%;
  line-height: 70px;
  border-bottom: 2px solid rgb(255, 103, 0);
  background: #fff !important;
  i {
    margin-left: 160px;
  }
  span {
    padding-left: 10px;
  }
}
.w {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #fff;
  .title {
    padding: 30px;
    font-size: 20px;
  }
  .ul {
    display: flex;
    .li {
      width: 220px;
      height: 178px;
      margin-left: 30px;
      border: 1px solid red;
      .p {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 10px;
        p {
          margin-top: 10px;
        }
      }
    }
    .lli {
      width: 220px;
      height: 178px;
      border: 1px solid #ccc;
      margin-left: 30px;
      .box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 10px;
        p {
          margin-top: 10px;
        }
      }
      .ic {
        .icon {
          font-size: 30px;
          padding-top: 50px;
        }
        text-align: center;
        line-height: 30px;
      }
    }
  }
  .center {
    margin: 15px 30px;

    p {
      color: #333;
      font-size: 18px;
      line-height: 40px;
    }
    img {
      width: 30px;
      height: 30px;
    }
    .uul {
      padding: 5px 0;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
      li {
        padding-top: 20px;
        display: flex;
        justify-content: space-between;
        color: #424242;
        overflow: hidden;
      }
    }
  }
  .section-shipment {
    margin: 0 30px;
    padding: 25px 0;
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden;
    .tit {
      float: left;
      width: 150px;
      color: #333;
      font-size: 18px;
      line-height: 38px;
    }
    .ship {
      float: left;
      line-height: 38px;
      font-size: 14px;
      color: #ff6700;
    }
  }
  .section-invoice {
    margin: 0 30px;
    padding: 25px 0;
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden;
    .tit {
      float: left;
      width: 150px;
      color: #333;
      font-size: 18px;
      line-height: 38px;
    }
    .invoice {
      float: left;
      line-height: 38px;
      font-size: 14px;
      margin-right: 20px;
      color: #ff6700;
    }
  }
  .count {
    margin: 0 30px;
    padding: 20px 0;
    overflow: hidden;
    .box-money {
      float: right;
      text-align: right;
      li {
        padding: 15px;
        font-size: 18px;
      }
    }
  }
  .bar {
    padding: 20px 30px;
    border-top: 2px solid #f5f5f5;
    overflow: hidden;
    .btn {
      float: right;
      :nth-child(1) {
        width: 160px;
        height: 40px;
        color: #ccc;
      }
      :nth-child(2) {
        width: 160px;
        height: 40px;
        background: #ff6700;
        border-color: #ff6700;
        color: #fff;
      }
    }
  }
}
</style>
